<script setup>
import { onMounted, onUnmounted, onUpdated, ref } from 'vue';
/* 
生命周期
1.vue3都写在 setup 里面
2. 注意生命周期的写法
3. 生命周期可以重复写多个一样的，不会被覆盖，会依次执行
*/
const count = ref(0)
const add = () => {
    count.value++
}

const h1 = document.querySelector('button')
console.log('setup里，页面没有渲染完成', h1);
onMounted(() => {
    const h1 = document.querySelector('button')
    console.log('页面渲染完成', h1);
})
onMounted(() => {
    console.log('页面渲染完成2');
})

onUpdated(() => {
    console.log('页面更新完成');
})

onUnmounted(() => {
    console.log('页面卸载完成');
})
</script>

<template>
    <h1>{{ count }}</h1>
    <button @click="add">点我加1</button>
</template>
